<template>
    <div class="footer">
        <van-row class="lei">
            <van-col 
                span="6" 
                v-for="(i,j) in vanColList"
                :key='j'
                @click="GoRouter(j)">{{i.label}}</van-col>
        </van-row>
        <p class="kefu">客服邮箱：<span>010@163.com</span></p>
        <van-row class="down">
            <van-col class="img" span="4">
                <img src="../assets/logo.png" alt="">
            </van-col>
            <van-col span="14">
                <h3>快读小说</h3>
                <p>快读免费小说，永久免费阅读</p>
            </van-col>
            <van-col span="6">
                <van-button type="info">下载APP</van-button>
            </van-col>
        </van-row>
   <BottomPop :ShowPop='ShowBottomPop' @ChangeShowPop='ShowBottomPopup'></BottomPop>
    </div>
</template>
<script>
import BottomPop from '@/components/BottomPop.vue'
export default {
    name:'Footer',
    components:{
      BottomPop
    },
    data(){
        return{
            vanColList:[
                {label:'首页',name:'Home'},
                {label:'分类',name:'Home'},
                {label:'书架',name:'Home'},
                {label:'我的',name:'Home'}
            ],
            ShowBottomPop:false
        }
    },
    methods:{
        GoRouter(j){
          switch(j){
            case 0:
              this.$router.push({name:'Home'})
              break
            case 1:
              this.$router.push({name:'Cate'})
              break
            default :
              this.ShowBottomPopup()
              break
          }
            // this.$router.push({name:i})
        },
        ShowBottomPopup(){
            this.ShowBottomPop=!this.ShowBottomPop
        }
    }
}
</script>
<style scoped lang='stylus'>
.footer
  width 100vw
  .lei
    text-align center
    font-size .22rem
    color #333
    font-weight 700
    .van-col
      padding .3rem
      position relative
      &:after
        content ''
        position absolute
        width .02rem
        height .3rem
        background-color #ccc
        right 0
      &:last-child
        &:after
          width 0
  .kefu
    font-size .18rem
    color #999
    text-align center
    line-height .66rem
    margin 0
    span
      color #2f94f9
.down
  padding .2rem
  height 1rem
  text-align center
  img 
    width .7rem
  h3,p
    width 100%
    text-align left
    line-height .42rem
    font-size .32rem
    color #2f94f9
  p
    color #999
    font-size .24rem
  .van-button
    width 1.39rem
    height .56rem
    font-size .22rem
    background-color #2494f9
    padding 0
  .van-col
    height 100%
    display flex
    justify-content center
    align-items center
    flex-wrap wrap
    &:last-child
      justify-content flex-end
    &:first-child
      justify-content flex-start
.downAdpopup
    background-color #ccc
    text-align center
    .downLoad
    .del
        height .95rem
        background-color #fff
        font-size .56rem
        color #222
        line-height 1rem
    .downLoad
        margin-bottom .1rem
</style>